<script setup lang="ts">
import { ref } from "vue";
import { reqGetUserInfo } from "@/api/user";
import io from "socket.io-client";
import { Toast } from "vant";
import { nextTick } from "vue";
import useStore from "@/store";
//! 获取初始数据 ===================================================================
const userInfo = ref({
    birthday: "",
    gender: 0,
    id: "",
    mobile: "",
    photo: "",
    name: "",
    intro: "",
});
async function getUserInfo() {
    const res = await reqGetUserInfo();
    console.log(res.data.data);
    userInfo.value = res.data.data;
}
getUserInfo();
//* 聊天主体区域==========================================================================
const word = ref("");
const listRef = ref();
const list = ref([
    {
        name: "aili",
        msg: "世贤，我的睡衣好看吗 ？",
        timestamp: Date.now(),
    },
    { name: "me", msg: "你怎么穿品如的衣服 ？！", timestamp: Date.now() },
    {
        name: "aili",
        msg: "既然要追求刺激，那就贯彻到底咯 ！",
        timestamp: Date.now(),
    },
    {
        name: "me",
        msg: "66666666",
        timestamp: Date.now(),
    },
]);
//! socket 通讯===========================================================
let socket = io();
function initSocket() {
    const { user } = useStore();
    //实例化请求时必须要传token
    socket = io("http://toutiao.itheima.net", {
        query: {
            token: user.tokenInfo.token,
        },
        transports: ["websocket"],
    });
    socket.on("connect", () => {
        Toast.success("连接成功");
    });
    socket.on("message", ({ msg, timestamp }) => {
        list.value.push({
            name: "aili",
            msg: msg,
            timestamp,
        });
        nextTick(() => {
            listRef.value.scrollTop = listRef.value.scrollHeight;
        });
    });
}

initSocket();
//!发送===============================================================
const send = () => {
    if (word.value.trim() === "") return Toast.fail("内容不能为空");
    socket.emit("message", {
        msg: word,
        timestamp: Date.now(),
    });
    list.value.push({
        name: "me",
        msg: word.value,
        timestamp: Date.now(),
    });
    nextTick(() => {
        listRef.value.scrollTop = listRef.value.scrollHeight;
    });
    word.value = "";
};
</script>
<template>
    <div class="container">
        <!-- 固定导航 -->
        <van-nav-bar
            fixed
            left-arrow
            @click-left="$router.back()"
            title="洪世贤的小宝贝：艾莉"
        ></van-nav-bar>

        <!-- 聊天主体区域 -->
        <div class="chat-list" ref="listRef">
            <!-- 左侧是机器人小智 -->
            <div
                class="chat-item"
                :class="item.name === 'aili' ? 'left' : 'right'"
                v-for="(item, index) in list"
                :key="index"
            >
                <div v-if="item.name === 'aili'">
                    <van-image
                        fit="cover"
                        round
                        src="https://img1.baidu.com/it/u=2239934952,538997047&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=479"
                    />
                    <div class="chat-pao">{{ item.msg }}</div>
                </div>

                <!-- 右侧是当前用户 -->
                <div v-else>
                    <div class="chat-me">{{ item.msg }}</div>
                    <van-image
                        fit="cover"
                        round
                        src="https://img0.baidu.com/it/u=2103337782,1812971363&fm=253&fmt=auto&app=138&f=JPEG?w=561&h=500"
                    />
                </div>
            </div>
        </div>

        <!-- 对话区域 -->
        <div class="reply-container van-hairline--top">
            <van-field
                @keyup.enter="send"
                v-model="word"
                placeholder="说点什么..."
            >
                <template #button>
                    <van-button
                        style="font-size: 20px; color: #fff; width: 40px"
                        @click="send"
                        size="small"
                        type="success"
                        ><van-icon name="guide-o"
                    /></van-button>
                </template>
            </van-field>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    background: #fafafa;
    padding: 46px 0 50px 0;
    .chat-list {
        height: 100%;
        overflow-y: scroll;
        .chat-item {
            padding: 10px;
            .van-image {
                vertical-align: top;
                width: 40px;
                height: 40px;
            }
            .chat-pao {
                vertical-align: top;
                display: inline-block;
                min-width: 10px;
                max-width: 70%;
                min-height: 40px;
                line-height: 38px;
                border: 0.5px solid #c2d9ea;
                border-radius: 4px;
                position: relative;
                padding: 0 10px;
                background-color: #e0effb;
                word-break: break-all;
                font-size: 14px;
                color: #333;
                &::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    top: 12px;
                    border-top: 0.5px solid #c2d9ea;
                    border-right: 0.5px solid #c2d9ea;
                    background: #e0effb;
                }
            }
            .chat-me {
                vertical-align: top;
                display: inline-block;
                min-width: 10px;
                max-width: 70%;
                min-height: 40px;
                line-height: 38px;
                border: 0.5px solid #c2d9ea;
                border-radius: 4px;
                position: relative;
                padding: 0 10px;
                background-color: #85ec49;
                word-break: break-all;
                font-size: 14px;
                color: #333;
                &::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    top: 12px;
                    border-top: 0.5px solid #c2d9ea;
                    border-right: 0.5px solid #c2d9ea;
                    background: #85ec49;
                }
            }
        }
    }
}
.chat-item.right {
    text-align: right;
    .chat-pao {
        margin-left: 0;
        margin-right: 15px;
        &::before {
            right: -6px;
            transform: rotate(45deg);
        }
    }
    .chat-me {
        margin-left: 0;
        margin-right: 15px;
        &::before {
            right: -6px;
            transform: rotate(45deg);
        }
    }
}
.chat-item.left {
    text-align: left;
    .chat-pao {
        margin-left: 15px;
        margin-right: 0;
        &::before {
            left: -5px;
            transform: rotate(-135deg);
        }
    }
    .chat-me {
        margin-left: 15px;
        margin-right: 0;
        &::before {
            left: -5px;
            transform: rotate(-135deg);
        }
    }
}
.reply-container {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 44px;
    width: 100%;
    background: #f5f5f5;
    z-index: 9999;
}
</style>
